/**
 * @File   : Header.js
 * @Author : xue.xiaoBing
 * @Date   : 2020/11/9
 * @Desc   : 头部工具栏
 **/

import PropTypes from "prop-types";
import {connect} from "react-redux";
import React, {Component} from "react";
import {NavLink} from "react-router-dom";
import {Col, Dropdown, Input, Menu, Row} from "antd/lib/index";

import {changeNavbar} from "src/api/request";
import logo from "src/assets/images/userLogo.jpg";

import './HomeHeader.sass';

const {Search} = Input;

class HomeHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 'home'
    }
  }

  handleClick = data => {
   this.props.changeNavbar(data.key)
  };

  render() {
    const {current} = this.props.navbarMenu;
    const menu = (
      <Menu>
        <Menu.Item icon={
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-userinfo"></use>
          </svg>}>
          <span style={{verticalAlign: 'middle', marginLeft: '10px'}}>关于我们</span>
        </Menu.Item>
        <Menu.Item icon={
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-exam"></use>
          </svg>}>
          <span style={{verticalAlign: 'middle', marginLeft: '10px'}}>联系我们</span>
        </Menu.Item>
        <Menu.Item icon={
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-train"></use>
          </svg>}>
          <span style={{verticalAlign: 'middle', marginLeft: '10px'}}>加入我们</span>
        </Menu.Item>
      </Menu>
    );
    const userInfoMenu = (
      <Menu>
        <Menu.Item icon={
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-exam"></use>
          </svg>}>
          <NavLink to={'/student/profile/1'} onClick={this.handleClick.bind(this,{'key':null})} style={{verticalAlign: 'middle', marginLeft: '10px'}}>个人信息</NavLink>
        </Menu.Item>
        <Menu.Item danger icon={
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-logout"></use>
          </svg>}>
          <NavLink to={'/logout'} style={{verticalAlign: 'middle', marginLeft: '10px'}}>退出登录</NavLink>
        </Menu.Item>
      </Menu>
    );
    return (
      <div className={'header'}>
        <Row className={'headerContent'} align={'middle'}>
          <Col className={'logoAndName'} span={5} offset={1}>
            <img className={'systemLogo'} src={logo} alt={''}/>
            <span className={'systemName'}>BJ在线教育平台</span>
          </Col>
          <Col className={'headerMenu'} span={14}>
            <Row style={{float: 'right'}} align={'middle'}>
              <Col span={18}>
                <Menu selectedKeys={current} onClick={this.handleClick} mode="horizontal">
                  <Menu.Item key="home">
                    <NavLink to="/">首页</NavLink>
                  </Menu.Item>
                  <Menu.Item key="video">
                    <NavLink to="/video">视频</NavLink>
                  </Menu.Item>
                  <Menu.Item key="live">
                    <NavLink to="/live">直播</NavLink>
                  </Menu.Item>
                  <Menu.Item key="test">
                    <NavLink to="/exam">考试</NavLink>
                  </Menu.Item>
                  <Menu.Item key="about">
                    <Dropdown overlay={menu} placement="bottomCenter">
                      <NavLink to={"/about"}>关于</NavLink>
                    </Dropdown>
                  </Menu.Item>
                </Menu>
              </Col>
              <Col span={6} style={{height: '100%'}}>
                <Search placeholder="搜索视频..."/>
              </Col>
            </Row>
          </Col>
          <Col className={'headerRight'} span={4}>
            <div style={{float: 'right', marginRight: '50px'}}>
              <img className={'systemLogo'} src={logo} alt={''}
                   style={{width: "30px", height: '30px', borderRadius: '50%'}}/>
              <Dropdown overlay={userInfoMenu} placement="bottomRight" style={{top: '50px'}} className={'xxxx'}>
                <span
                  style={{color: 'white', marginLeft: '20px', verticalAlign: 'middle', cursor: 'pointer'}}>伍六七</span>
              </Dropdown>
            </div>
          </Col>
        </Row>
      </div>
    )
  }
}

HomeHeader.propTypes = {
  changeNavbar: PropTypes.func,
};
export default connect(
  state => ({
    navbarMenu: state.uiState.navbarMenu
  }),
  {changeNavbar}
)(HomeHeader)